<template>
	<nav-header title="详情" custom-nav :show-right="false">
	</nav-header>
	<view class="post-detail">
		<view class="post-header">
			<image :src="moments.user.headImage" class="avatar" />
			<view class="user-info">
				<view class="username">{{moments.user.nickName}}</view>
			</view>
		</view>
		<view class="post-content" @click="hideOptions">
			<view class="text-content">{{moments.content}}</view>
			<view v-if="moments.pictureList.length > 0" class="image-gallery">
				<image v-for="(image, index) in moments.pictureList" :key="index" :src="image"
					@click="previewImage(index)" class="post-image" />
			</view>

		</view>
		<view class="publish-loc" v-if="moments.address">
			<svg-icon icon="定位" :width="28"></svg-icon>
			<text>{{moments.address}}</text>
		</view>
		<!-- 点赞评论 -->

		<view class="publish-gn">
			<view>
			    <text class="gn-time">{{moments.createTime}}</text>
				
			</view>
			<view class="gn-right">
				<view v-show="showOptions">
					<view class="good-list">
						<view class="good" @click="toggleLike(moments.id)">
							<uni-icons type="heart" size="18" style="padding-left: 10rpx;"></uni-icons>
							<text> {{isLiked ? '已赞' : '点赞'}}
							</text>
						</view>
						<text>|</text>
						<view class="good" @click="showCommentBox">
							<uni-icons type="chatbubble" size="18"></uni-icons> <text>评论</text>
						</view>
					</view>
				</view>
				<!-- <uni-icons type="more-filled" size="28" ></uni-icons> -->
				<view class="more-bac" @click="toggleOptions">
					<svg-icon icon="more" :width="48"></svg-icon>
				</view>
			</view>
		</view>

		<view class="publish-dz" v-if="moments.starList.length > 0">
			<!-- <uni-icons type="heart" size="18" color="#118dd0"></uni-icons> -->
			<svg-icon icon="like-1" :width="34"></svg-icon>
			<view class="dz">
				<view>
					{{moments.nameStr }}
				</view>
			</view>
		</view>

		<!-- 评论框 -->
		<view v-if="showComment" style="display: flex; align-items: center;border:2px solid #ccc;">
			<input class="uni-input" v-model="content" placeholder="请输入评论" style="flex:1;border:none;" /></input>
			<button class="mini-btn" type="default" size="mini" style="border:none;"
				@click="submitComment()">评论</button>
		</view>
		<view class="publish-pl">
			<view class="pl">
				<view v-for="(comment,commentIndex) in moments.commentList" style="padding: 10rpx;">

					<view class="pl-style" @longpress="deleteComment(comment,commentIndex)">
						<view @click="replyComment(commentIndex)"><text>{{ comment.fromNickName }}</text>
							<text class="pl-text" v-if="Boolean(comment.atId)">回复</text>
							<text>{{comment.atNickName}}</text> :
							<text class="pl-text">{{ comment.comment }}</text>
						</view>
					</view>


					<!-- 回复评论 -->
					<view v-if="replyingToCommentId === commentIndex"
						style="display: flex; align-items: center;border:2px solid #ccc;margin-top: 3rpx;">
						<input class="uni-input" v-model="content" placeholder="请输入评论"
							style="flex:1;border:none;color: #000;" />
						<button class="mini-btn" type="default" size="mini" style="border:none;"
							@click="submitComment(comment)">评论</button>
					</view>


				</view>

			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				isLiked: false,
				showOptions: false,
				showComment: false,
				replyingToCommentId: null,
				userInfo: {},
				content: "",
				moments: {},
			};
		},
		methods: {
			// 图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.moments.pictureList,
					current: index
				});
			},
			// 点赞
			toggleLike(id) {
				const isLiked = this.isLiked
				if (!isLiked) {
					let star = {
						fromNickName: this.userInfo.nickName,
						fromUserId: this.userInfo.userId
					}
					this.moments.starList.push(star)
					const nickNameArray = this.moments.starList.map(star => star.fromNickName);
					const nameStr = nickNameArray.join(', ');
					this.moments.nameStr = nameStr
					const circleId = id
					this.$http({
						url: '/friendCircle/star',
						data: {
							circleId: circleId
						},
						method: 'POST'
					}).then(res => {
						this.isLiked = true
						this.showOptions = false; // 关闭选项菜单
					});

				} else {
					console.log('取消点赞')
					const circleId = id
					this.$http({
						url: '/friendCircle/star',
						data: {
							circleId: circleId
						},
						method: 'POST'
					}).then(res => {

					});
					const newArray = this.moments.starList.filter((star) => star.fromUserId !== this.userInfo.userId)
					this.moments.starList = newArray
					const nickNameArray = this.moments.starList.map(star => star.fromNickName);
					const nameStr = nickNameArray.join(', ');
					this.moments.nameStr = nameStr

				}

				this.isLiked = !this.isLiked;
				this.showOptions = false; // 关闭选项菜单
			},


			// 删除评论
			deleteComment(comment, commentIndex) {

				if (comment.fromUserId != this.userInfo.userId) {
					console.log('不是该用户发的评论，无法删除')
					return
				}



				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个评论吗？',
					success: (res) => {
						if (res.confirm) {

							// 前端评论移除

							const commentList = this.moments.commentList
							const newCommentList = commentList.filter((_, i) => i !== commentIndex);
							this.moments.commentList = newCommentList

							const id = comment.id
							this.$http({
								url: '/friendCircle/comment/delete?id=' + id,
								method: 'POST'
							}).then(res => {
								console.log('删除成功')
							});
						}
					}
				});
			},
			toggleOptions() {
				this.showOptions = !this.showOptions;
			},
			// 关闭评论 点赞
			hideOptions(event) {
				this.showOptions = false;
			},
			replyComment(index) {
				this.showComment = false;
				if (this.replyingToCommentId === index) {
					this.replyingToCommentId = null;
				} else {
					this.replyingToCommentId = index;
				}

			},

			showCommentBox() {
				this.replyingToCommentId = null;
				this.showOptions = false; // 关闭选项菜单
				this.showComment = !this.showComment; // 显示评论框
			},

			submitComment(info) {
				console.log('info', info)

				const content = this.content.trim();

				if (content.length === 0) {
					this.commentId = null;
					console.log('没有提交任何评论');
					return;
				}

				// 数据组装
				const userId = this.userInfo.userId
				console.log('userId', userId)
				const nickname = this.userInfo.nickName



				let atId = '';
				let atNickName = '';

				if (info) {
					atId = info.fromUserId;
					atNickName = info.fromNickName;
				}

				const comment = {
					fromNickName: nickname,
					comment: content,
					fromUserId: userId,
					...(atId && {
						atId,
						atNickName: atNickName
					})
				};

				console.log('comment', comment)

				// 把评论数据放到评论里
				this.moments.commentList.push(comment)

				const circleId = this.moments.id
				const formData = {
					circleId,
					content,
					...(atId && {
						atId
					})
				};

				this.$http({
					url: '/friendCircle/comment/add',
					data: formData,
					method: 'POST'
				}).then(res => {


				}).finally(() => {
					this.content = null,
						this.showComment = false;
					this.showOptions = false
					this.replyingToCommentId = null; // 提交后隐藏评论框
				});

			},
			// 获取个人信息
			_getInfo() {
				this.$http({
					url: '/friendCircle/getInfo',
					method: 'GET'
				}).then(res => {
					this.userInfo = res
				})

			},

			_getData(id) {
				this.$http({
					url: `/friendCircle/getCircle/${id}`,
					method: 'GET'
				}).then(res => {
					this.moments = res
					const starList = res.starList

					if (starList.length > 0) {
						const nickNameArray = starList.map(star => star.fromNickName);
						const nameStr = nickNameArray.join(', ');
						this.moments.nameStr = nameStr
						this.isLiked = starList.some(userStar => this.userInfo.userId === userStar.fromUserId);
					}
					console.log("startList", this.moments)

				});

			}




		},
		onLoad(options) {
			// let data = JSON.parse(options)
			const id = options.id
			this._getInfo()
			this._getData(id)
		},
	};
</script>

<style lang="scss" scoped>
	.post-detail {
		max-width: 600px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #ddd;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.post-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 12rpx;
		margin-right: 10px;
	}

	.user-info {
		flex: 1;
	}

	.username {
		font-size: 16px;
		font-weight: bold;
	}

	.publish-loc {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 25rpx;
		color: $brand-600;
	}

	.timestamp {
		font-size: 12px;
		color: #999;
	}

	.post-content {
		margin-bottom: 20px;
	}

	.text-content {
		font-size: 16px;
		line-height: 1.5;
	}

	.image-gallery {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.post-image {
		width: 100px;
		height: 100px;
		object-fit: cover;
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 4px;
	}

	.post-footer {
		border-top: 1px solid #ddd;
		padding-top: 20px;
	}



	.comment-input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-right: 10px;
	}

	.comment-submit {
		background-color: #007bff;
		color: #fff;
		border: none;
		padding: 10px 20px;
		border-radius: 4px;
		cursor: pointer;
	}

	.comment-submit:hover {
		background-color: #0056b3;
	}

	.publish-gn {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.gn-time {
			font-size: 25rpx;
			color: #aaa;
		}

		.gn-right {
			display: flex;
			justify-content: flex-end;
			position: relative;
			flex: 1;

			.more-bac {
				height: 48rpx;
				padding: 0 16rpx;
				border-radius: 24rpx;
				background-color: $gray-200;
			}
		}

		.good-list {
			position: absolute;
			right: 0;
			top: 60rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;
			background-color: #d8d8d8;
			padding: 6rpx 8rpx;
			border-radius: 16rpx;
			z-index: 100;

			/* 增加三角形箭头 */
			&::before {
				content: '';
				position: absolute;
				top: -20rpx;
				right: 20rpx;
				border: 10rpx solid transparent;
				border-bottom-color: #d8d8d8;
			}

			.good {
				display: flex;
				align-items: center;
				background-color: #d8d8d8;
				font-size: 16px;


				text {
					padding: 10rpx;
				}
			}
		}
	}

	.publish-dz {
		display: flex;
		gap: 8rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;

		.dz {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			font-size: 26rpx;
			color: $brand-500;
		}
	}

	.publish-pl {
		// display: flex;

		.pl {
			background-color: #f0f0f0;
			height: 100%;
			font-size: 26rpx;
			color: $brand-500;
			// font-size: 16px;

			.pl-text {
				font-size: 26rpx;
				color: #000;
			}
		}
	}

	.pl-style {}

	.mini-btn {
		margin-left: 10px;
	}
</style>